<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:include="include :: header('新增dubbo接口')" />
	<link th:href="@{/css/common.css}" rel="stylesheet"/>
	<link th:href="@{/css/detail.css}" rel="stylesheet"/>
	<script th:src="@{/js/go.js}"></script>
</head>
	<body class="gray-bg">
		<div class="wrapper wrapper-content ">
			<div class="content">
				<input th:field="*{tableInfo.id}" id="id" type="hidden">
				<div class="content-box">
					<div class="info-head">
						<p class="pull-left">
							<span th:text="${tableInfo.tableName}">表中文名称</span>
							<span th:text="${tableInfo.tableEnName}">TableEnglishName</span>
						</p>
                        <p class="pull-right">
                            <span th:if="${interfaceUser} != null">
<!--						<img class="head-img" th:src="@{/img/login-background.jpg}"/>-->
								<span th:text="${interfaceUser.username}"></span>(<span th:text="${interfaceUser.roleName}"></span>)
							</span>
							<span th:if="${owner} != null">
								<select name="status" id="status" th:with="type=${@dict.getType('status')}">
									<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="${interfaceUser.objectStatus}"></option>
								</select>
							</span>
                        </p>
					</div>
					<div class="tips"th:text="${tableInfo.tableDescription}" style="display: none"></div>
					<div class="table-info">
						<ul class="list-group">
							<li class="list-group-item">
								<span>创建人</span>
								<span th:text="${tableInfo.createBy}">王树立</span>
							</li>
							<li class="list-group-item">
								<span>创建时间</span>
								<span th:text="${#dates.format(tableInfo.createTime, 'yyyy-MM-dd HH:mm:ss')}">2021.11.21 13:21</span>
							</li>
							<li class="list-group-item"></li>
							<li class="list-group-item">
								<span>更新人</span>
								<span th:text="${tableInfo.updateBy}">王树立</span>
							</li>
							<li class="list-group-item">
								<span>更新时间</span>
								<span th:text="${#dates.format(tableInfo.updateTime, 'yyyy-MM-dd HH:mm:ss')}">2021.11.21 13:21</span>
							</li>
						</ul>
					</div>
					<ul class="nav nav-tabs navtabs contentTab" role="tablist">
						<li class="active"><a class="navTab" href="#content-preview" role="tab" data-action = "relationSimpleFieldList" data-toggle="tab">模型预览</a></li>
						<li><a class="navTab" href="#content-relation" role="tab" data-toggle="tab" data-action = "contentRelation" data-type="1">模型关系（我关联的）</a></li>
						<li><a class="navTab" href="#content-relation2" role="tab" data-toggle="tab" data-action = "contentRelation2" data-type="2">模型关系（关联我的）</a></li>
						<li><a class="navTab" href="#content-field" role="tab" data-toggle="tab" data-action = "relationFieldList">字段属性</a></li>
						<li><a class="navTab" href="#content-api" role="tab" data-toggle="tab" data-action = "relationIntfList">关联接口</a></li>
						<li><a class="navTab" href="#content-service" role="tab" data-toggle="tab" data-action = "relationBusinessSystemList">关联业务系统</a></li>
						<li><a class="navTab" href="#content-page" role="tab" data-toggle="tab" data-action = "relationPageList">关联页面</a></li>
						<li><a class="navTab" href="#content-usage" role="tab" data-toggle="tab" data-action = "relationUsageList">关联用况</a></li>
						<li><a class="navTab" href="#content-question" role="tab" data-toggle="tab" data-action = "relationQuestionList">问题备注</a></li>

					</ul>
					<div class="tab-content">
						<div role="tabpanel" class="tab-pane active mt20 " id="content-preview"></div>
						<div role="tabpanel" class="tab-pane active mt20 " id="content-relation">
							<div id="myDiagramDiv" style="background-color: white;width: 100%; height: 700px; position: relative; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); cursor: auto;">
								<canvas tabindex="0" width="904" height="698" style="position: absolute; top: 0px; left: 0px; z-index: 2; user-select: none; width: 904px; height: 698px; cursor: auto;">This
									text is displayed if your browser does not support the Canvas HTML element.</canvas>
							</div>
						</div>
						<div role="tabpanel" class="tab-pane active mt20 " id="content-relation2">
							<div id="myDiagramDiv2" style="background-color: white;width: 100%; height: 700px; position: relative; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); cursor: auto;">
								<canvas tabindex="0" width="904" height="698" style="position: absolute; top: 0px; left: 0px; z-index: 2; user-select: none; width: 904px; height: 698px; cursor: auto;">This
									text is displayed if your browser does not support the Canvas HTML element.</canvas>
							</div>
						</div>
						<div role="tabpanel" class="tab-pane mt20 content-field" id="content-field"></div>
						<div role="tabpanel" class="tab-pane content-field mt20" id="content-api"></div>
						<div role="tabpanel" class="tab-pane mt20 content-service" id="content-service"></div>
						<div role="tabpanel" class="tab-pane mt20 content-page" id="content-page"></div>
						<div role="tabpanel" class="tab-pane content-usage mt20" id="content-usage"></div>
						<div role="tabpanel" class="tab-pane mt20 content-question" id="content-question"></div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<th:block th:include="include :: footer" />

<!--关联字段模板-->
<script id="contentSimpleFieldTpl" type="text/template">
	<div class="retation-table">
		<ul class="list-group">
			{{# layui.each(d, function(index, a){ }}
				{{# if(a.categorySpace) { }}
				<li class="list-group-item space"></li>
				{{# }}}
				<li class="list-group-item">
					<font style = "width:30px;display: inline-block">{{# if(a.fieldType=='1') { }} PK {{# } else if(a.fieldType == '2') { }} FK {{#} else { }}-{{#}}}</font>
					{{# if(a.fkFieldType=='1') { }}
					<span style="color: red !important;">{{a.fieldName || '一'}}</span>
					<span style="color: red !important;">
						{{a.fieldEnName || '一'}}
					</span>
					{{#} else { }}
					<span>{{a.fieldName || '一'}}</span>
					<span>
						{{a.fieldEnName || '一'}}
					</span>
					{{#}}}
					<span>
						{{a.fieldDataType || '一'}}
						{{# if(a.fieldLength) { }}
								({{a.fieldLength}})
							{{# } }}
					</span>
				</li>
			{{# }); }}
		</ul>
	</div>
</script>

<!--关联字段模板-->
<script id="contentFieldTpl" type="text/template">
	<div class="bootstrap-table bootstrap3">
		<div class="fixed-table-container" style="padding-bottom: 0px;">
		<div class="fixed-table-body">
			<table class="table  table-hover content-field" id="bootstrap-table" style="table-layout:fixed;">
				<thead>
				<tr>
					<th style="width: 80px;">主外键</th>
					<th style=" width: 200px;">字段中文名称</th>
					<th style=" width: 200px;">字段名称</th>
					<th style=" width: 150px;">外键类型</th>
					<th style=" width: 150px;">字段数据类型</th>
					<th style=" width: 100px;">字段长度</th>
					<th style=" width: 100px;">模拟数据</th>
					<th style=" width: 300px;">模拟数据详细举例</th>
					<th style=" width: 300px;">字段需求故事</th>
					<th style=" width: 300px;">是否记录版本</th>
					<th style=" width: 100px;">是否必填</th>
					<th style=" width: 100px;">是否作为入参</th>
					<th style=" width: 100px;">是否风险点</th>
					<th style=" width: 300px;">风险备注</th>
					<th style=" width: 80px;"></th>
				</tr>
				</thead>
				<tbody>
				{{# layui.each(d, function(index, a){ }}
					<tr>
						<td style="width: 80px;">{{# if(a.fieldType=='1') { }} PK {{# } else if(a.fieldType == '2') { }} FK {{#} else { }}-{{#}}}</td>
						{{# if(a.fkFieldType=='1') { }}
						<td style="color: red;width: 200px;">{{a.fieldName || '一'}}</td>
						<td style="color: red;width: 200px;">{{a.fieldEnName || '一'}}</td>
						{{#} else { }}
						<td style=" width: 200px;">{{a.fieldName || '一'}}</td>
						<td style=" width: 200px;">{{a.fieldEnName || '一'}}</td>
						{{#}}}
						<td style=" width: 150px;">{{# if(a.fkFieldType=='1') { }} 核心模型关系 {{# } else if(a.fkFieldType == '2') { }} 冗余模型关系 {{#} else { }}-{{#}}}</td>
						<td style=" width: 150px;">{{a.fieldDataType || '--'}}</td>
						<td style=" width: 100px;">{{a.fieldLength || '--'}}</td>
						<td style=" width: 100px;">{{a.mockData || '一'}}</td>
						<td style=" width: 300px;">{{a.mockDescription || '一'}}</td>
						<td style=" width: 300px;">{{a.fieldStory || '一'}}</td>
						<td style=" width: 100px;">{{# if(a.isChange=='Y') { }} 是 {{# } else if(a.isChange == 'N') { }} 否 {{#} else { }}-{{#}}}</td>
						<td style=" width: 100px;">{{# if(a.isRequired=='Y') { }} 是 {{# } else if(a.isRequired == 'N') { }} 否 {{#} else { }}-{{#}}}</td>
						<td style=" width: 100px;">{{# if(a.isInParam=='Y') { }} 是 {{# } else if(a.isInParam == 'N') { }} 否 {{#} else { }}-{{#}}}</td>
						<td style=" width: 100px;">{{# if(a.isRisk=='Y') { }} 是 {{# } else if(a.isRisk == 'N') { }} 否 {{#} else { }}-{{#}}}</td>
						<td style=" width: 300px;">{{a.riskRemark || '一'}}</td>
						<td style=" width: 80px;">
							{{# if(a.isFieldEnum=='Y') { }}
							<a onclick="queryFieldEnum({{a.dictId}})">查看枚举</a>
							{{#}}}
							{{# if(a.fieldType=='2') { }}
							<a onclick="queryFKRelation({{a.id}})">查看外键</a>
							{{#}}}
						</td>
					</tr>
				{{# }); }}
				</tbody>
			</table>
		</div>
	</div>
	</div>
</script>

<!--关联接口模板-->
<script id="contentIntfTpl" type="text/template">
	<ul class="nav nav-tabs" role="tablist">
		<li class="active"><a href="#bff" role="tab" data-toggle="tab">BFF接口</a></li>
		<li><a href="#dubbo" role="tab" data-toggle="tab">DUBBO接口</a></li>
		<li><a href="#method" role="tab" data-toggle="tab">METHOD</a></li>
	</ul>
	<div class="tab-content">
		<div role="tabpanel" class="tab-pane active" id="bff">
			<table class="table">
				<thead>
				<tr>
					<th>编号</th>
					<th>协议类型</th>
					<th>接口名称</th>
					<th>接口地址</th>
					<th>接口类型</th>
					<th>是否分页</th>
					<th>所有内容条数</th>
					<th>页数</th>
					<th>页面内容条数</th>
					<th>操作</th>
				</tr>
				</thead>
				<tbody>
				{{# layui.each(d.bffList, function(index, a){ }}
					<tr>
						<td>{{a.id || '一'}}</td>
						<td>{{# if(a.interfaceType=='1') { }} GET {{# } else if(a.interfaceType == '2') { }} POST {{# } else if(a.optType == '3') { }} PUT {{#} else { }}DELETE{{#}}}</td>
						<td>{{a.interfaceName || '一'}}</td>
						<td>{{a.interfaceUrl || '一'}}</td>
						<td>{{# if(a.optType=='1') { }} 增 {{# } else if(a.optType == '2') { }} 删 {{# } else if(a.optType == '3') { }} 改 {{#} else { }}查{{#}}}</td>
						<td>{{# if(a.isPage=='N'){ }}否{{# } else {}}是{{#} }}</td>
						<td>{{a.total || '一'}}</td>
						<td>{{a.page || '一'}}</td>
						<td>{{a.pageSize || '一'}}</td>
						<td><a href="#" onclick="interfaceDetail({{a.id}})">查看详情</a></td>
					</tr>
				{{# }); }}
				</tbody>
			</table>
		</div>
		<div role="tabpanel" class="tab-pane" id="dubbo">
			<table class="table">
				<thead>
				<tr>
					<th>编号</th>
					<th>接口名称</th>
					<th>接口地址</th>
					<th>接口类型</th>
					<th>是否分页</th>
					<th>所有内容条数</th>
					<th>页数</th>
					<th>页面内容条数</th>
					<th>操作</th>
				</tr>
				</thead>
				<tbody>
				{{# layui.each(d.dubboList, function(index, a){ }}
				<tr>
					<td>{{a.id || '一'}}</td>
					<td>{{a.interfaceName || '一'}}</td>
					<td>{{a.interfaceUrl || '一'}}</td>
					<td>{{# if(a.optType=='1') { }} 增 {{# } else if(a.optType == '2') { }} 删 {{# } else if(a.optType == '3') { }} 改 {{#} else { }}查{{#}}}</td>
					<td>{{# if(a.isPage=='N'){ }}否{{# } else {}}是{{#} }}</td>
					<td>{{a.total || '一'}}</td>
					<td>{{a.page || '一'}}</td>
					<td>{{a.pageSize || '一'}}</td>
					<td><a href="#" onclick="interfaceDetail({{a.id}})">查看详情</a></td>
				</tr>
				{{# }); }}
				</tbody>
			</table>
		</div>
		<div role="tabpanel" class="tab-pane" id="method">
			<table class="table">
				<thead>
				<tr>
					<th>编号</th>
					<th>接口名称</th>
					<th>接口地址</th>
					<th>接口类型</th>
					<th>是否分页</th>
					<th>所有内容条数</th>
					<th>页数</th>
					<th>页面内容条数</th>
					<th>操作</th>
				</tr>
				</thead>
				<tbody>
				{{# layui.each(d.methodList, function(index, a){ }}
				<tr>
					<td>{{a.id || '一'}}</td>
					<td>{{a.interfaceName || '一'}}</td>
					<td>{{a.interfaceUrl || '一'}}</td>
					<td>{{# if(a.optType=='1') { }} 增 {{# } else if(a.optType == '2') { }} 删 {{# } else if(a.optType == '3') { }} 改 {{#} else { }}查{{#}}}</td>
					<td>{{# if(a.isPage=='N'){ }}否{{# } else {}}是{{#} }}</td>
					<td>{{a.total || '一'}}</td>
					<td>{{a.page || '一'}}</td>
					<td>{{a.pageSize || '一'}}</td>
					<td><a href="#" onclick="interfaceDetail({{a.id}})">查看详情</a></td>
				</tr>
				{{# }); }}
				</tbody>
			</table>
		</div>
	</div>
</script>

<!--关联页面模板-->
<script id="contentPageTpl" type="text/template">
	{{# layui.each(d, function(index, a){ }}
	<div>
		<p><img th:src="@{/img/document.png}" style = "margin-top:-3px;"/><span>{{a.pageName}}</span></p>
		<ul class="list-group">
			{{# layui.each(a.fileInfList, function(indexB, b){ }}
			<li class="list-group-item">
				<div><img class = "partPage" src="{{b.filePath}}" th:onerror="this.src='/img/default-img.png'"/></div>
			</li>
			{{# }); }}
		</ul>
	</div>
	{{# }); }}
</script>

<!--关联用况模板-->
<script id="contentUsageTpl" type="text/template">
	<ul class="list-group">
		{{# layui.each(d, function(index, a){ }}
		<li class="list-group-item">
			<div class="list-tit">
				<p>
					<span>{{# if(a.fbType=='1') { }} 前台 {{#} else { }}后台{{#}}}</span>
					<span>{{# if(a.usageType=='1') { }} 增 {{# } else if(a.usageType == '2') { }} 删 {{# } else if(a.usageType == '3') { }} 改 {{#} else { }}查{{#}}}</span>
					<span>{{a.usageyName || ''}}</span>
					<a class="pull-right" style = "cursor: pointer;" onclick="usageDetail({{a.id}})">查看详情</a>
				</p>
				<p>
					<span>用况架构</span>
					<span>
							{{# if(a.clientType=='1') { }} PCweb {{# } else if(a.clientType == '2') { }} H5 {{# } else if(a.clientType == '3') { }} APP {{#} else { }} 微信小程序 {{#}}}
							· {{# if(a.isAlone=='1') { }} 单模块 {{#} else { }} 非单模块 {{# }}}
							· {{# if(a.versionType=='1') { }} 新功能 {{# } else if(a.versionType == '2') { }} 优化 {{#} else { }} 废弃 {{#}}}
						</span>
				</p>
			</div>
			<div class="list-content">
				<p>用况故事</p>
				<p>{{a.usageStory || '无'}}</p>
			</div>
			<div class="list-content">
				<p>价值描述</p>
				<p>{{a.valueDescription || '无'}}</p>
			</div>
			<div class="list-content">
				<p>业务实现逻辑</p>
				<p>{{a.businessImplDescription || '无'}}</p>
			</div>
			<div class="list-content">
				<p>优化或废弃说明</p>
				<p>{{a.versionDescription || '无'}}</p>
			</div>
		</li>
		{{# }); }}
	</ul>
</script>

<!--关联业务系统模板-->
<script id="contentBusinessSystemTpl" type="text/template">
	{{# layui.each(d, function(index, a){ }}
	<div>
		<img th:src="@{/img/Icon-xitong.png}"/><span>{{a.businessSystemName}}</span>
		<a class="pull-right" style = "cursor: pointer;" onclick="businessSystemDetail({{a.id}})">查看详情</a>
	</div>
	<div style="margin-top: 15px;color: rgba(0,0,0,0.85);">{{a.businessSystemDescription||''}}</div>
	{{# }); }}
</script>

<!--问题备注模板-->
<script id="contentQuestionTpl" type="text/template">
	{{# if(d.questionCount== 0){ }}
	<div class="empty">
		<p><img th:src="@{/img/empty.png}"/></p>
		<p>暂无问题备注</p>
		<p><button type="button" class="btn btn-primary add-question">提交问题</button></p>
	</div>
	{{# } else {}}
	<div class="questions">
		<p class="pull-left">当前共{{d.questionCount}}个问题</p>
		{{# if(d.owner) { }}
		<a class="pull-right add-question" style = "cursor: pointer;"><img th:src="@{/img/Icon-add.png}" class="icon" style="padding-right: 4px;margin-top: -3px;" />提问题</a>
		{{# } }}
	</div>
	<ul class="list-group ques-list">
		{{# layui.each(d.list, function(index, a){ }}
		<li class="list-group-item">
			<div>
				<div class="pull-left">
							<span><img class="head-img list-head-img" th:src="@{/img/login-background.jpg}"/>· {{a.createBy || '一'}} · {{a.createTime || '一'}}<span>
				</div>
				{{# if(d.owner) { }}
				<div class="pull-right">
					<icon class="icon del delete-question" data-id="{{a.id}}" style = "cursor: pointer;"></icon>
				</div>
				{{# } }}
			</div>
			<p>{{a.title || '一'}}</p>
			<p>{{a.description || '一'}}</p>
			<ul class="list-group-horizontal">
				{{# layui.each(a.fileInfList, function(indexB, b){ }}
				<li class="list-group-item" style="box-shadow:none"><img class = "partPage" src="{{b.filePath}}" th:onerror="this.src='/img/default-img.png'"/><p style="text-align: center">{{b.fileName}}</p></li>
				{{# }); }}
			</ul>
		</li>
		{{# }); }}
	</ul>

	{{#} }}
</script>

	<script  th:inline="javascript">
        // 表接口uri
        const prefix = ctx + "table/table";
		var owner = [[${owner}]];
        $(function () {
			//响应数据换行处理
            $(".tips").html($(".tips").html().replace(/(\r\n|\n)/g,"<br>")).show();
            // 接口详情默认加载
            relationSimpleFieldList();

			$("#status").change(function () {
				var value = $(this).val();
				var config = {
					url: ctx + "userDataAuth/userDataAuth/updateStatus",
					type: "POST",
					dataType: "json",
					data: "objectId=" + $("#id").val() + "&objectType=4&objectStatus=" + value,
					beforeSend: function () {
						$.modal.loading("正在处理中，请稍后...");
					},
					success: function(result) {
						$.modal.closeLoading();
						if (result.code == web_status.SUCCESS) {
							$.modal.msgSuccess("更新成功");
						} else if (result.code == web_status.WARNING) {
							$.modal.alertWarning(result.msg)
						} else {
							$.modal.alertError(result.msg);
						}
					}
				};
				$.ajax(config);
			})

            $('.navtabs').on('dblclick', '.navTab', function (e) {
                if($(this).data("action").indexOf("contentRelation")==-1){
                    return false;
				}
                var url = prefix + '/tableRef/'+$("input[name='id']").val()+'/'+$(this).data("type");
                $.modal.openTab($(this).html(),url);
            });
        });

		$("body").on('click', '.del', function() {
			$(this).parents(".list-group-item").remove();
		});
		$("body").on('click', ".partPage", function(e) {
            var url = $(this).attr("src");
            var json = {
                "title": "预览",
                "start": 0,
                "data": [{
                    "src": url,
                }]
            };
            layer.photos({
                photos: json,
                closeBtn: 0, //右上角按钮，可通过配置1和2来展示，如果不显示，则closeBtn: 0
                anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
            });
		}).on('click', ".add-question", function () {
			var title = "提问题";
			var tableId = $("input[name='id']").val();
			var url = ctx + "interface/interface/add_question/" + tableId + "/2";
			var width = 800;
			var height = $(window).height() - 50;
			$.modal.open(title, url, width, height);
		}).on('click','.delete-question',function(){
			var id = $(this).attr("data-id");
			var config = {
				url: ctx + "questionInfo/questionInfo/remove?ids=" + id,
				type: "POST",
				dataType: "json",
				data: null,
				beforeSend: function () {
					$.modal.loading("正在处理中，请稍后...");
				},
				success: function(result) {
					$.modal.closeLoading();
					if (result.code == web_status.SUCCESS) {
						$.modal.msgSuccess("删除成功");
						relationQuestionList();
					} else if (result.code == web_status.WARNING) {
						$.modal.alertWarning(result.msg)
					} else {
						$.modal.alertError(result.msg);
					}
				}
			};
			$.ajax(config);
		});

		function queryFieldStatus(fieldId) {
			var title = "字段状态";
			var url = ctx + "table/table/queryFieldStatus/" + fieldId;
			var width = 800;
			var height = $(window).height() - 50;
			var options = {
				title: title,
				width: width,
				height: height,
				url: url,
				skin: 'layui-layer-gray',
				btn: ['关闭'],
				yes: function (index, layero) {
					layer.close(index);
				}
			};
			$.modal.openOptions(options);
		}

		function queryFieldEnum(dictId) {
			dictId = dictId || 0
			var title = "字段枚举";
			var url = ctx + "table/table/queryFieldEnum/" + dictId;
			var width = 800;
			var height = $(window).height() - 50;
			var options = {
				title: title,
				width: width,
				height: height,
				url: url,
				skin: 'layui-layer-gray',
				btn: ['关闭'],
				yes: function (index, layero) {
					layer.close(index);
				}
			};
			$.modal.openOptions(options);
		}

		function queryFKRelation(fieldId) {
			var title = "外键关系";
			var url = ctx + "table/table/queryFKRelation/" + fieldId;
			var width = 800;
			var height = $(window).height() - 50;
			var options = {
				title: title,
				width: width,
				height: height,
				url: url,
				skin: 'layui-layer-gray',
				btn: ['关闭'],
				yes: function (index, layero) {
					layer.close(index);
				}
			};
			$.modal.openOptions(options);
		}

        /**标签切换事件*/
        $(".contentTab a").click(function (e) {
            var action = $(this).data("action");
            if(action) {
                window[action]();
            }
        });

        /**
         * 关联字段列表函数
         */
        function relationSimpleFieldList() {
            var params = {};
            params.tableId = $("input[name='id']").val();
            var resultJson;
            var config = {
                url: prefix + "/fieldInfoList",
                type: "POST",
                dataType: "json",
                async: false,
                data: params,
                success: function (result) {
                    if (result && result.code == 0) {
                        resultJson = result.data;
                    }
                }
            };
            $.ajax(config);
            if(!resultJson) {
                return false;
            }
            let category = resultJson[0].category;
            $.each(resultJson, function (indexB, a) {
                a.categorySpace = false;
                if (category != a.category) {
                    a.categorySpace = true;
                    category = a.category;
                }
            });
            var contentSimpleFieldTplHtml = $("#contentSimpleFieldTpl").html();
            laytpl(contentSimpleFieldTplHtml).render(resultJson, function (html) {
                $("#content-preview").empty();
                $("#content-preview").append(html);
            });
        };

        /**
         * 关联字段列表函数
         */
        function relationFieldList() {
            var params = {};
            params.tableId = $("input[name='id']").val();
            var resultJson;
            var config = {
                url: prefix + "/fieldInfoList",
                type: "POST",
                dataType: "json",
                async: false,
                data: params,
                success: function (result) {
                    if (result && result.code == 0) {
                        resultJson = result.data;
                    }
                }
            };
            $.ajax(config);
            if(!resultJson) {
                return false;
            }
			let category = resultJson[0].category;
			$.each(resultJson, function (indexB, a) {
				a.categorySpace = false;
				if (category != a.category) {
					a.categorySpace = true;
					category = a.category;
				}
			});
            var contentFieldTplHtml = $("#contentFieldTpl").html();
            laytpl(contentFieldTplHtml).render(resultJson, function (html) {
                $("#content-field").empty();
                $("#content-field").append(html);
            });
        };

        /**
         * 关联接口列表函数
         */
        function relationIntfList() {
            var params = {};
            params.tableId = $("input[name='id']").val();
            var resultJson;
            var config = {
                url: prefix + "/interfaceList",
                type: "POST",
                dataType: "json",
                async: false,
                data: params,
                success: function (result) {
                    if (result && result.code == 0) {
                        resultJson = result.data;
                    }
                }
            };
            $.ajax(config);
            if(!resultJson) {
                return false;
            }
            var contentIntfTplHtml = $("#contentIntfTpl").html();
            laytpl(contentIntfTplHtml).render(resultJson, function (html) {
                $("#content-api").empty();
                $("#content-api").append(html);
            });
        };

        /**
         * 关联业务系统函数
         */
        function relationBusinessSystemList() {
            var params = {};
            params.tableId = $("input[name='id']").val();
            var resultJson;
            var config = {
                url: prefix + "/businessSystemList",
                type: "POST",
                dataType: "json",
                async: false,
                data: params,
                success: function (result) {
                    if (result && result.code == 0) {
                        resultJson = result.data;
                    }
                }
            };
            $.ajax(config);
            if(!resultJson) {
                return false;
            }
            var contentBusinessSystemTplHtml = $("#contentBusinessSystemTpl").html();
            laytpl(contentBusinessSystemTplHtml).render(resultJson, function (html) {
                $("#content-service").empty();
                $("#content-service").append(html);
            });
        };

        /**
         * 关联页面函数
         */
        function relationPageList() {
            var params = {};
            params.tableId = $("input[name='id']").val();
            var resultJson;
            var config = {
                url: prefix + "/pageList",
                type: "POST",
                dataType: "json",
                async: false,
                data: params,
                success: function (result) {
                    if (result && result.code == 0) {
                        resultJson = result.data;
                    }
                }
            };
            $.ajax(config);
            if(!resultJson) {
                return false;
            }
            var contentPageTplHtml = $("#contentPageTpl").html();
            laytpl(contentPageTplHtml).render(resultJson, function (html) {
                $("#content-page").empty();
                $("#content-page").append(html);
            });
        };

        /**
         * 关联用况函数
         */
        function relationUsageList() {
            var params = {};
            params.tableId = $("input[name='id']").val();
            var resultJson;
            var config = {
                url: prefix + "/usageList",
                type: "POST",
                dataType: "json",
                async: false,
                data: params,
                success: function (result) {
                    if (result && result.code == 0) {
                        resultJson = result.data;
                    }
                }
            };
            $.ajax(config);
            if(!resultJson) {
                return false;
            }
            var contentUsageTplHtml = $("#contentUsageTpl").html();
            laytpl(contentUsageTplHtml).render(resultJson, function (html) {
                $("#content-usage").empty();
                $("#content-usage").append(html);
            });
        };

        function interfaceDetail(id) {
			$.operate.addTab2("接口详情", ctx + "interface/interface/bffDetail/" + id);
		}

		/**
		 * 问题备注
		 */
		function relationQuestionList() {
			var params = {};
			params.objectId = $("input[name='id']").val();
			params.objectType = "2";
			var resultJson;
			var config = {
				url: ctx + "interface/interface/questionList",
				type: "POST",
				dataType: "json",
				async: false,
				data: params,
				success: function (result) {
					if (result && result.code == 0) {
						resultJson = result.data;
					}
				}
			};
			$.ajax(config);
			if(!resultJson) {
				return false;
			}
			var data = {};
			data.list = resultJson;
			data.questionCount = resultJson.length;
			data.owner = owner;
			var contentQuestionTplHtml = $("#contentQuestionTpl").html();
			laytpl(contentQuestionTplHtml).render(data, function (html) {
				$("#content-question").empty();
				$("#content-question").append(html);
			});
		};

		function businessSystemDetail(id) {
			$.operate.addTab2("业务系统详情", ctx + "businessSystem/businessSystem/detail/" + id);
		}

		function usageDetail(id) {
			$.operate.addTab2("用况详情", ctx + "usage/usage/detail/" + id);
		}
		function contentRelation() {
			if (window.goSamples) goSamples();
			if (window.myDiagram){
				return false;
			}
			var $go = go.GraphObject.make;
			myDiagram =
					$go(go.Diagram, "myDiagramDiv",
							{
								allowDelete: false,
								allowCopy: false,
								layout: $go(go.ForceDirectedLayout),
								"undoManager.isEnabled": true
							});
			// name设置
			var itemTempl =
					$go(go.Panel, "Horizontal",
							$go(go.Panel, "Table",
									$go(go.RowColumnDefinition,{ row: 1, separatorStrokeWidth: 1.5, separatorStroke: "black" }),
									$go(go.TextBlock, new go.Binding("text", "keyType"), { row: 1, column: 0, width:18, margin: new go.Margin(2, 4, 2, 0) }),
									$go(go.TextBlock, new go.Binding("text", "keyName"), { row: 1, column: 1, width:140, margin: new go.Margin(2, 10, 2, 4) }),
									$go(go.TextBlock, new go.Binding("text", "keyEnName"), { row: 1, column: 2, width:160, margin: new go.Margin(2, 10, 2, 4) }),
									$go(go.TextBlock, new go.Binding("text", "dataType"), { row: 1, column: 3, margin: new go.Margin(2, 10, 2, 4) }),
									$go(go.TextBlock, new go.Binding("text", "remark"), { row: 1, column: 4, margin: new go.Margin(2, 10, 2, 4) }),
									)
							);
			// 节点模板
			myDiagram.nodeTemplate =
					$go(go.Node, "Auto",
							{
								selectionAdorned: true,
								resizable: true,
								layoutConditions: go.Part.LayoutStandard & ~go.Part.LayoutNodeSized,
								fromSpot: go.Spot.AllSides,
								toSpot: go.Spot.AllSides,
							},
							new go.Binding("location", "location").makeTwoWay(),
							new go.Binding("desiredSize", "visible", function(v) {
								return new go.Size(NaN, NaN);
							}).ofObject("LIST"),
							$go(go.Shape, "RoundedRectangle", {
								fill: 'white',
								stroke: "#000",
								strokeWidth: 1
							}),
							$go(go.Panel, "Table", {
								defaultRowSeparatorStroke: "black",
							},
									// 表格头部表明名称
									$go(go.TextBlock, {
										row: 0,
										alignment: go.Spot.Center,
										margin: new go.Margin(5, 24, 5, 24),
										font: "bold 14px sans-serif"
									},
											new go.Binding("text", "key")
											),
									$go(go.Panel, "Vertical", {
										name: "LIST",
										row: 1,
										padding: 3,
										alignment: go.Spot.TopLeft,
										defaultAlignment: go.Spot.Left,
										stretch: go.GraphObject.Horizontal,
										itemTemplate: itemTempl
									},
											new go.Binding("itemArray", "items")),
									)
							);
			myDiagram.linkTemplate =
					$go(go.Link,
							{
								selectionAdorned: true,
								layerName: "Foreground",
								reshapable: true,
								routing: go.Link.AvoidsNodes,
								corner: 5,
								curve: go.Link.JumpOver
							},
							$go(go.Shape,
									{ strokeWidth: 2, stroke: '#303B45' }),
							$go(go.Shape,
									{ toArrow: "Standard", fill: '#303B45', stroke: null })
							);
			var params = {};
			params.tableId = $("input[name='id']").val();
			var resultJson;
			var config = {
				url: prefix + "/tableRef",
				type: "POST",
				dataType: "json",
				async: false,
				data: params,
				success: function (result) {
					resultJson = result;
				}
			};
			$.ajax(config);
			// 表格内部数据
			var nodeDataArray = resultJson.nodeDataArray;
			//数据块关联关系
			var linkDataArray = resultJson.linkDataArray;;
			myDiagram.model = $go(go.GraphLinksModel, {
				copiesArrays: true,
				copiesArrayObjects: true,
				nodeDataArray: nodeDataArray,
				linkDataArray: linkDataArray
			});
		}
		function contentRelation2() {
			if (window.goSamples) goSamples();
			if (window.myDiagram2){
				return false;
			}
			var $go = go.GraphObject.make;
			myDiagram2 =
					$go(go.Diagram, "myDiagramDiv2",
							{
								allowDelete: false,
								allowCopy: false,
								layout: $go(go.ForceDirectedLayout),
								"undoManager.isEnabled": true
							});
			// name设置
			var itemTempl =
					$go(go.Panel, "Horizontal",
							$go(go.Panel, "Table",
									$go(go.RowColumnDefinition,{ row: 1, separatorStrokeWidth: 1.5, separatorStroke: "black" }),
									$go(go.TextBlock, new go.Binding("text", "keyType"), { row: 1, column: 0, width:18, margin: new go.Margin(2, 4, 2, 0) }),
									$go(go.TextBlock, new go.Binding("text", "keyName"), { row: 1, column: 1, width:140, margin: new go.Margin(2, 10, 2, 4) }),
									$go(go.TextBlock, new go.Binding("text", "keyEnName"), { row: 1, column: 2, width:160, margin: new go.Margin(2, 10, 2, 4) }),
									$go(go.TextBlock, new go.Binding("text", "dataType"), { row: 1, column: 3, margin: new go.Margin(2, 10, 2, 4) }),
									$go(go.TextBlock, new go.Binding("text", "remark"), { row: 1, column: 4, margin: new go.Margin(2, 10, 2, 4) })
									)
							);
			// 节点模板
			myDiagram2.nodeTemplate =
					$go(go.Node, "Auto",
							{
								selectionAdorned: true,
								resizable: true,
								layoutConditions: go.Part.LayoutStandard & ~go.Part.LayoutNodeSized,
								fromSpot: go.Spot.AllSides,
								toSpot: go.Spot.AllSides,
							},
							new go.Binding("location", "location").makeTwoWay(),
							new go.Binding("desiredSize", "visible", function(v) {
								return new go.Size(NaN, NaN);
							}).ofObject("LIST"),
							$go(go.Shape, "RoundedRectangle", {
								fill: 'white',
								stroke: "#000",
								strokeWidth: 1
							}),
							$go(go.Panel, "Table", {
								defaultRowSeparatorStroke: "black",
							},
									// 表格头部表明名称
									$go(go.TextBlock, {
										row: 0,
										alignment: go.Spot.Center,
										margin: new go.Margin(5, 24, 5, 24),
										font: "bold 14px sans-serif"
									},
											new go.Binding("text", "key")
											),
									$go(go.Panel, "Vertical", {
										name: "LIST",
										row: 1,
										padding: 3,
										alignment: go.Spot.TopLeft,
										defaultAlignment: go.Spot.Left,
										stretch: go.GraphObject.Horizontal,
										itemTemplate: itemTempl
									},
											new go.Binding("itemArray", "items")),
									)
							);
			myDiagram2.linkTemplate =
					$go(go.Link,
							{
								selectionAdorned: true,
								layerName: "Foreground",
								reshapable: true,
								routing: go.Link.AvoidsNodes,
								corner: 5,
								curve: go.Link.JumpOver
							},
							$go(go.Shape,
									{ strokeWidth: 2, stroke: '#303B45' }),
							$go(go.Shape,
									{ toArrow: "Standard", fill: '#303B45', stroke: null })
							);
			var params = {};
			params.tableId = $("input[name='id']").val();
			var resultJson;
			var config = {
				url: prefix + "/tableRef2",
				type: "POST",
				dataType: "json",
				async: false,
				data: params,
				success: function (result) {
					resultJson = result;
				}
			};
			$.ajax(config);
			// 表格内部数据
			var nodeDataArray = resultJson.nodeDataArray;
			//数据块关联关系
			var linkDataArray = resultJson.linkDataArray;;
			myDiagram2.model = $go(go.GraphLinksModel, {
				copiesArrays: true,
				copiesArrayObjects: true,
				nodeDataArray: nodeDataArray,
				linkDataArray: linkDataArray
			});
		};
	</script>
</html>
